<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box1">M1
        <div class="box2">M2
            <div class="box3">M3
                <div class="box4">M4</div>
            </div>
        </div>
    </div>
    <script>
        // 在使用 addEventListener()注册事件 时  可以指定 将事件 绑定在元素的 捕获阶段 还是冒泡阶段
        // 事件触发的时候:  是先从外往里进行捕获(目标元素),捕获到目标元素之后就会开始 从里往外进行事件冒泡
        // 在事件机制中,每一个元素 都会经历 两个过程
        var box1 = document.querySelector(".box1");
        var box2 = document.querySelector(".box2");
        var box3 = document.querySelector(".box3");
        var box4 = document.querySelector(".box4");
        // 第三个参数 :代表绑定在 哪个阶段
        // 不设置时: 默认绑在 冒泡阶段
        // true: 绑在捕获阶段
        // false: 冒泡阶段


        //注意,强调: 事件触发时:  遵循 先捕获,后冒泡
            box1.addEventListener("click",function(){
                console.log("list1");
            },true);

            box2.addEventListener("click",function(){
                console.log("list2");
            },true);

            box3.addEventListener("click",function(){
                console.log("list3");
            },false);

            box4.addEventListener("click",function(){
                console.log("list4");
            },true);
            // box1捕获 box2捕获  box3冒泡 box4捕获
    </script>
</body>
</html>